import {Form, Input, message, Modal, Space, Switch, Upload} from "antd";
import {useEffect, useState} from "react";
import http from "../../../utils/http";

const CreateServiceModal = (props) => {
    const [form] = Form.useForm();
    const [isModalVisible,setIsModalVisible] = useState(false);
    const [data,setData] = useState({});
    const formData = props.data;

    useEffect(()=>{
        setIsModalVisible(props.isShow);
        setData(props.data);
        if (formData.creationTime){
            formData.account = JSON.parse(sessionStorage.getItem('user')).username;
            formData.creationTime = formData.creationTime.substring(0,10) + ' ' + formData.creationTime.substring(11,19);
            formData.headphoto = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F19%2F34%2F41%2F6e7b6e22_E193441_e21c0c7g.png%21%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue%2Fformat%2Fpng%2Ffh%2F630&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642426439&t=c7143341b047689e5b776a87f08d84b4';
        }
    },[props]);

    form.setFieldsValue(formData);

    const handleCancel = () => {
        setIsModalVisible(false);
        setData(props.data);
        props.close();
    }
    const handleOk = () => {
        http({
            url:'api/staff/updateStaff',
            method:'post',
            params:formData
        }).then(res=>{
            console.log(res);
            if (res.code == 200){
                message.success('修改成功');
            }
        })
        console.log(formData)
        setIsModalVisible(false);
        props.close();
    }
    return (
        <Modal title="修改" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <Form
                form={form}
                initialValues={formData}
                labelCol={{span: 8}}
                wrapperCol={{span: 16}}
                autoComplete="off"
            >
                <Form.Item name={'account'} label={'管理员账号'} rules={[{required:true,message:'请输入绑定管理员账号'}]}>
                    <Input
                        value={formData.account}
                        disabled
                        placeholder={'请输入绑定管理员账号'}
                    />
                </Form.Item>
                <Form.Item name={'adminphone'} label={'管理员手机号'} rules={[{required:true,message:'请输入绑定管理员手机号'}]}>
                    <Input
                        value={formData.adminphone}
                        type={'tel'}
                        onChange={(ev)=>{formData.adminphone = ev.target.value}}
                        placeholder={'请输入绑定管理员手机号'}
                    />
                </Form.Item>
                <Form.Item name={'name'} label={'客服姓名'} rules={[{required:true,message:'请输入客服姓名'}]}>
                    <Input
                        value={formData.name}
                        onChange={(ev)=>{formData.name = ev.target.value}}
                        placeholder={'请输入客服姓名'}
                    />
                </Form.Item>
                <Form.Item name={'phone'} label={'手机号'} rules={[{required:true,message:'请输入手机号'}]}>
                    <Input
                        value={formData.phone}
                        type={'tel'}
                        onChange={(ev)=>{formData.phone = ev.target.value}}
                        placeholder={'请输入手机号'}
                    />
                </Form.Item>
                <Form.Item name={'wechat'} label={'客服微信'} rules={[{required:true,message:'请输入客服微信'}]}>
                    <Input
                        value={formData.wechat}
                        onChange={(ev)=>{formData.wechat = ev.target.value}}
                        placeholder={'请输入客服微信'}
                    />
                </Form.Item>
                <Form.Item name={'state'} label={'客服状态'} rules={[{required:true,message:'请输入客服微信'}]}>
                    <Switch defaultChecked={formData.state} onChange={(val)=>{formData.state = val}} />
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default CreateServiceModal;